<template>
    <view class="body">
		<view class="top">
			<view class="bg">
				<view>
					<image class="curve_share" src="../../static/curve_share.png"/>
					<button class="curve_share_btn" open-type="share">分享</button>
					<navigator url="../curve/horizontal">
					  <image class="rotate_hv" src="../../static/rotate_hv.png"></image>
					</navigator>
				</view>
				<view class="box">
					<uni-segmented-control  :current="current" :values="items" @clickItem="getServerData" style-type="button" active-color="#FFFFFF"></uni-segmented-control>
			    </view>
			</view>
			<view class="content">
				<view v-show="current === 0">
					<!-- 周 -->
					<view class="qiun-columns">
						<view class="qiun-charts" >
							<!--#ifndef MP-ALIPAY -->
							<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
							<!--#endif-->
						</view>
						
					</view>
				</view>
				<view v-show="current === 1">
				   <!-- 月 -->
				   <view class="qiun-columns">
				   	<view class="qiun-charts" >
				   		<!--#ifndef MP-ALIPAY -->
				   		<canvas canvas-id="diagram_m" id="diagram_m" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
				   		<!--#endif-->
				   	</view>
				   </view>
				</view>
				<view v-show="current === 2">
				   <!-- 年 -->
				   <view class="qiun-columns">
				   	<view class="qiun-charts" >
				   		<!--#ifndef MP-ALIPAY -->
				   		<canvas canvas-id="diagram_y" id="diagram_y" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
				   		<!--#endif-->
				   	</view>
				   </view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
	import store from 'store';
	//分段器
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	// 曲线图
	import uCharts from '@/components/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	
	var _self;
	var canvaColumn=null;
	export default {
    components: {uniSegmentedControl},
		onShareAppMessage(res) {//分享
		if (res.from === 'button') {// 来自页面内分享按钮
		  console.log(res.target)
		}
		return {
		  title: '减肥日记',
		  content:'减肥路上,一直陪伴在你身边的小工具',
		  path: '/pages/curve/curve',
		}
	  }, 
	data() {
        return {
            items: ['周','月','年'],
            current: 0,
			cWidth:'',
			cHeight:'',
			toggle:false,//切换
			pixelRatio:1,
			textarea:'',
			// token:'',
			target_weight:'',
			maxa:'',
			minn:'',
			line_one:'', 
            line_two:'',
        }
    },
	onLoad() {
		
	},
	onShow:function() {
		_self = this;
		//#ifdef MP-ALIPAY
		uni.getSystemInfo({
			success: function (res) {
				if(res.pixelRatio>1){
					_self.pixelRatio =2;
				}
			},
		});
		//#endif
		this.cWidth=uni.upx2px(750);//竖屏宽
		this.cHeight=uni.upx2px(500);//竖屏高
		this.getServerData();
		var token = uni.getStorageSync('token');
		var date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		var choose_date = year+'-'+month+'-'+day;
		uni.request({
			url:store.state.URL+"rwd/select_weight/day_select",
			data:{
				token,
				choose_date,
			},
			success:(res)=>{
				console.log(res.data.target_weight,'曲线目标体重');//查出来赋值
				this.target_weight = res.data.target_weight;//赋值
				console.log(res.data.max,"最大体重");
				this.maxa=res.data.max;
				console.log(res.data.min,"最小体重");
				this.minn=res.data.min;
				console.log(res.data.line_one,'最小值横线');
				this.line_one=res.data.line_one;
				console.log(res.data.line_two,'最大值横线');
				this.line_two=res.data.line_two;
			},
			fail: () => {
				console.log("网络错误，小程序端请检查合法域名");
			},
		});
	},
    methods: {
		// Rotate:function(){
		//     uni.redirectTo({
		// 		url:'../curve/horizontal'
		// 	});
		// },
		getServerData(index){
			var token = uni.getStorageSync('token');
			if (this.current !== index) {
			    this.current = index;
			}
			console.log(index);
			var diagram_url;
			if(index == 1){
				uni.setStorageSync('x_num',7);
				diagram_url = store.state.URL+"rwd/select_weight/diagram_m";//月
				uni.request({
					url:diagram_url,
						data:{
							token,
						},
					success: function(res) {
						console.log(res);
						let Column={categories:[],series:[]};
						//这里掌邦的数组
						Column.categories=res.data.diagram.chartData.categories;
						Column.series=res.data.diagram.chartData.series;
						_self.textarea = JSON.stringify(res.data.diagram.chartData);
						_self.showColumn("diagram_m",Column);
						//x_num = 35;
						
					},
					fail: () => {
						_self.tips="网络错误，小程序端请检查合法域名";
					},
				});
			}else if(index == 2){
				uni.setStorageSync('x_num',7);
				diagram_url = store.state.URL+"rwd/select_weight/diagram_y";//年
				uni.request({
					url:diagram_url,
						data:{
							token,
						},
					success: function(res) {
						console.log(res);
						let Column={categories:[],series:[]};
						//这里掌邦的数组
						Column.categories=res.data.diagram.chartData.categories;
						Column.series=res.data.diagram.chartData.series;
						_self.textarea = JSON.stringify(res.data.diagram.chartData);
						_self.showColumn("diagram_y",Column);
					},
					fail: () => {
						_self.tips="网络错误，小程序端请检查合法域名";
					},
				});
			}else{
				uni.setStorageSync('x_num',7);
				diagram_url =store.state.URL+"rwd/select_weight/histogram";//周
				uni.request({
					url:diagram_url,
						data:{
							token,
						},
					success: function(res) {
						console.log(res);
						let arr = res.data.histogram.chartData.series[0]['data'];
						for (let k in arr) {
							if(arr[k] == 0){
								arr[k] = null;
							}
						}
						let Column={categories:[],series:[]};
						//这里掌邦的数组
						Column.categories=res.data.histogram.chartData.categories;
						Column.series=res.data.histogram.chartData.series;
						_self.textarea = JSON.stringify(res.data.histogram.chartData);
						_self.showColumn("canvasColumn",Column);
						
					},
					fail: () => {
						_self.tips="网络错误，小程序端请检查合法域名";
					},
				});
			}
			
		},
		showColumn(canvasId,chartData){
			var t_w = this.target_weight;
			console.log( this.target_weight,' this.target_weight');
			var max=this.maxa;
			var min=this.minn;
			var line_one=this.line_one;
            var line_two=this.line_two;
			//(1/28)*(max - min) 17.1111
			let bh = Math.ceil(1/28*(max - min));
			console.log(bh,'aghulflf');
			var is_one = true;
			var is_two = true;
			if(line_one < t_w && t_w < (line_one+bh) || (line_one-bh) < t_w && t_w < line_one){
				is_one = false;
			}else if(line_two < t_w && t_w < (line_two+bh) || (line_two-bh) < t_w && t_w < line_two){
				is_two = false;
			}
			const x_num = uni.getStorageSync('x_num');
			console.log(x_num,'x_num');
			canvaColumn=new uCharts({
				$this:_self,
				canvasId: canvasId,
				type: 'line',
				fontSize:11,
				padding:[15,15,0,15],
				legend:{
					show:false,//隐藏X轴下方图例
					padding:5,
					lineHeight:11,
					margin:5,
				},
				dataLabel:false,
				dataPointShape:true,
				dataPointShapeType:'hollow',
				background:'#FFFFFF',
				pixelRatio:_self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				enableScroll: true,//开启图表拖拽功能
				xAxis: {
					axisLine:false,
					calibration:true,
					itemCount:x_num,
					gridColor:'#FFFFFF',
					scrollShow:false,
					scrollAlign:'right',
				},
				yAxis: {
					gridType:'dash',
					gridColor:'#CCCCCC',
					splitNumber:1,
					data:[{
						position:'right',
						axisLine:false,
						min:min,
						max:max,
						format:(val)=>{return val.toFixed(1)+'斤'}//如不写此方法，Y轴刻度默认保留两位小数
					}],
				},
				width: _self.cWidth*_self.pixelRatio,
				height: _self.cHeight*_self.pixelRatio,
				enableMarkLine: true,/***需要开启标记线***/
				extra: {
					line:{
						type:'curve',
					},
					tooltip:{
						xAxisLabel:true,
						labelFontColor:'#000000',
						labelBgColor:'#FFFFFF',
					},
					markLine: {
					  type: 'dash',
					  dashLength:2,
					  data: [
					  {
						value:line_one?line_one:'',
						lineColor: '#CCCCCC',
						showLabel:is_one,
						labelBgOpacity:'0',
						labelBgColor:'#FFFFFF',  
					  },
					  {
						value:line_two?line_two:'',
						lineColor: '#CCCCCC',
						showLabel:is_two,
						labelBgOpacity:'0',
						labelBgColor:'#FFFFFF',
					  },{
					    value:t_w?t_w:'',
					    lineColor: '#F47C7B',
					    showLabel:true,
						labelBgOpacity:'0',
						labelFontColor:'#F47C7B',
						labelBgColor:'#00FF00',
					  }
					  
					  ]},
					touchMoveLimit:30,
				},
			});
		},
		touchColumn(e){
			canvaColumn.scrollStart(e);
		},
		moveColumn(e) {
			canvaColumn.scroll(e);
		},
		touchEndColumn(e) {
			canvaColumn.scrollEnd(e);
			//下面是toolTip事件，如果滚动后不需要显示，可不填写
			canvaColumn.touchLegend(e);
			canvaColumn.showToolTip(e, {
				format: function (item, category) {
					//写修改/补记体重信息
					//return category + ' ' + item.name + ' ' + item.data 
				    return category + ' ' + ' ' + item.data; 
				}
			});
		},
    }
}
</script>

<style>
	/* @font-face {
		font-family:'PingFangSC-Regular';
		src:url('~@/fonts/PingFangRegular.ttf');
	} */
	 body{
		height: 100%;
		background-color: #FFFFFF;
	}
	.body{
		height: 100%;
		background-color: #FFFFFF;
	}
	.top{
		height: 800upx;
		width: 750upx;
		background-color: #FFFFFF;
	}
	.bg{
		height: 128upx;
		width: 750upx;
		background-color: #F47C78;
	}
	.curve_share{
		position: absolute;
		/* top: 4.2%; */
		padding-top: 46upx;
		left: 5%;
		height: 36upx;
		width: 36upx;
	}
	.curve_share_btn{
		position: absolute;
		/* top: 3.5%; */
		padding-top: 38upx;
		left: 8%;
		height:46upx;
		width: 110upx;
		font-size: 22upx;
		font-family: PingFangSC-Regular;
		background-color:transparent;
		color: #FFFFFF;
	}
	.curve_share_btn:after{
		 border: none;
	 }
	 .rotate_hv{
		 position: absolute;
		 width: 44upx;
		 height: 44upx;
		 /* top: 3.8%; */
		 padding-top: 44upx;
		 right: 7%;
	 }
	.box{
		padding-top: 32upx;
	}
	.content{
		height: 600upx;
		width: 750upx;
		background-color: #FFFFFF;
	}
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
		
	}
</style>
